<script setup lang="ts">
import { getImage } from "@/api/home";
import { ref, onMounted } from "vue";
import type { Ref } from "vue";
import router from "@/router";
import { showToast } from 'vant';
import { ShareSheet } from 'vant';
const iconName: Ref<string> = ref('like-o')
const text = ref('取消')
const showShare = ref(false);

interface iImg {
  imgid: number
  price: string
  imgurl: string
  title: string
  city: string

}
const proImage: Ref<iImg[]> = ref([])
const options = ref([
  { name: '微信', icon: 'wechat' },
  { name: '朋友圈', icon: 'wechat-moments' },
  { name: '微博', icon: 'weibo' },
  { name: 'QQ', icon: 'qq' },
])

// const btnName:Ref<string> = ref()
onMounted(() => {
  getImage().then(res => {
    // console.log(res);
    proImage.value = res.data.data
    // console.log(proImage.value);
  })

});
// 返回的点击事件
function onClickLeft() {
  router.back();
}
//关注事件
function careClick() {
  showToast('关注成功');
}
// 收藏事件
function iconChange() {
  showToast('收藏成功');
}
// 分享事件
function shareClick() {
  showShare.value = true
}
</script>
<template>
  <div class="box">
    <!-- 头部部分 -->
    <div class="header">
      <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft">
        <template #right>
          <div>
            <van-icon @change="iconChange" size="20" @click="iconName = iconName == 'like-o' ? 'like' : 'like-o'"
              class="icon" :name="iconName" />
            <!-- <van-icon name="like" color="red" /> -->
          </div>
          <van-icon size="20" @click="shareClick" name="share-o" />
          <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" :cancel-text="text" />
        </template>
      </van-nav-bar>
    </div>
    <!-- //内容部分 -->
    <div class="container">
      <!-- 轮播图数据 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in proImage" :key="item.imgid">
          <img :src="item.imgurl" alt="" />
        </van-swipe-item>
      </van-swipe>
      <!-- 内容详情 -->
      <div class="desc">
        <div class="descheader">
          <span>
            <van-icon size="30" name="contact" />
            <h3>民宿用户</h3>
          </span>
          <div class="changeIcon">
            <van-button block @click="careClick">+ 关注</van-button>
            <!-- <van-button>已关注</van-button> -->
          </div>
        </div>
        <span class="descicon">
          <van-icon name="location-o" size="30" />
        <p>珠海</p>
        </span>
        <p class="text">
          国庆假期出游，房间很满意哦，干净卫生，风景好，
          大家相处愉快，值得推荐这个民宿，装修风格简约，店
          家是个小姐姐，推荐了很多地方...
      </p>

        <!-- 提到的民宿----- -->
        <h2 class="title">提到的民宿</h2>

        <div class="hotel">
          <van-tabs>
            <van-tab>
              <van-skeleton :animate="false" @click="$router.push('/detail/detail')" v-for="item in proImage"
                :key="item.imgid">
                <template #template>
                  <div :style="{ display: 'flex', width: '100%' }">
                    <img :src="item.imgurl" alt="" />
                    <div :style="{ flex: 1, marginLeft: '16px' }">
                      <p class="p1">
                        <span class="s1">{{ item.title }}</span>
                      </p>
                      <p>{{ item.city }}</p>
                      <h1></h1>
                      <p class="p2">
                        <span class="s3">2019-10-12 21:00:00</span>
                        <span class="s4">{{ item.price }}</span>
                      </p>
                    </div>
                  </div>
                </template>
              </van-skeleton>
            </van-tab>
          </van-tabs>
        </div>
        <!-- 图标部分 -->
        <div class="icon">
          <div class="icon1">
            <van-icon name="like-o" />
            <span>11</span>
          </div>
          <div class="icon2">
            <van-icon name="star-o" />
            <span>11</span>
          </div>
          <div>
            <van-icon name="chat-o" />
            <span>0</span>
          </div>
        </div>

        <!-- 评论部分
                   -->
        <div class="text1">
          <p>万一火了呢，赶快去评论~</p>
        </div>

        <!-- 推荐部分
                   -->
        <div class="proList">
          <h2>为你推荐</h2>
          <ul class="pro">
            <li @click="$router.push('/home/detail2')" class="proItem" v-for="item in proImage" :key="item.imgid">
              <div class="itemImage">
                <van-image :src="item.imgurl"></van-image>
              </div>
              <div class="itemInfo">
                <div class="itemTitle">
                  {{ item.title }}
                </div>
                <div class="itemPrice">
                  {{ item.price }}
                </div>
              </div>
            </li>
          </ul>
        </div>

      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  // padding-bottom: 200px;
  background-color: rgba(251, 251, 251, 1);
}

.van-nav-bar {
  // float: left;
  // position: relative;
  height: 44px;
  //   background-color: skyblue;
  text-align: center;
  line-height: 44px;
}

.van-swipe {
  position: relative;
}

.van-swipe-item img {
  width: 100%;
  height: 300px;
}

.header .icon {
  margin-right: 15px;
  cursor: pointer;
}

//描述部分
.descheader {
  display: flex;
  justify-content: space-between;
}

.descheader .van-icon {
  margin: 8px 0 0 10px;
}

.descheader h3 {
  margin-left: 20px;
  font-size: 15px;
}

.descheader span {
  display: flex;
}

.van-button {
  width: 85px;
  height: 28px;
  border-color: orange;
  color: orange;
  border-radius: 10px;
  margin: 10px 10px 0 0;
}

.descicon {
  display: flex;
  // border: 1px solid #666;
}

.descicon .van-icon {
  margin-top: 10px;
  margin-left: 7px;
}

.descicon p {
  font-size: 15px;
  margin-left: 10px;
}

.text {
  font-size: 15px;
  margin-left: 10px;
}

.title {
  margin-left: 10px;
}

.hotel {
  // height: 80px;
  // border: 1px solid #f66;
}

.icon {
  display: flex;
  // border: 1px solid #f66;
  height: 35px;
  line-height: 35px;
  margin-left: 15px;
}

.icon1 {
  margin-left: 200px;
}

.icon2 {
  margin-left: 28px;
  margin-right: 28px;
}

.text1 {
  // border: 1px solid #666;
  margin-left: 15px;
}

.text1 p {
  font-size: 14px;
  padding-left: 10px;
}

.pro {
  display: flex;
  flex-wrap: wrap;
}

.proList h2 {
  margin-left: 15px;
}

.proItem {
  width: 48%;
  margin: 3px 1%;
  // border: 1px solid skyblue;
  box-sizing: border-box;
}

.itemImage {
  width: 100%;
  height: 200px;
  margin-left: 5px;
}

.proItem .van-image {
  width: 100%;
  height: 100%;
}

.itemInfo {
  line-height: 22px;
  padding: 5px 10px;
  box-sizing: border-box;
}

.itemTitle {
  font-size: 16px;
  color: skyblue;
}

.itemPrice {
  font-size: 14px;
  color: orange;
}

//提及民宿
.van-skeleton {
  margin-top: 5px;
}

img {
  width: 94px;
  height: 94px;
  border-radius: 10px;
}

.p1 {
  display: flex;
  justify-content: space-between;
}

.p1 .s1 {
  font-size: 15px;
}


.p2 {
  display: flex;
  justify-content: space-between;
}

.p2>.s3 {
  color: gray;
}

.p2>.s4 {
  font-size: 15px;
  color: orange;
}
</style>
